<template>
  <div class="container">
    生产数据大屏
    <img
      src="http://ems3.oss-cn-shenzhen.aliyuncs.com/20230404180858-983adcde4d38572b04afe51492ed3a6f.png?Expires=1680606539&OSSAccessKeyId=LTAI5tFDpQxUNkkNFYXC4waD&Signature=iuG0JBAHGX2bTB11%2FcZaiHzqncw%3D"
      alt=""
    />
  </div>
</template>

<script lang="ts" setup></script>

<script lang="ts">
  export default {
    name: 'Monitor',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .layout {
    display: flex;

    &-left-side {
      flex-basis: 300px;
    }

    &-content {
      flex: 1;
      padding: 0 16px;
    }

    &-right-side {
      flex-basis: 280px;
    }
  }
</style>

<style lang="less" scoped>
  // responsive
  @media (max-width: @screen-lg) {
    .layout {
      flex-wrap: wrap;
      &-left-side {
        flex: 1;
        flex-basis: 100%;
        margin-bottom: 16px;
      }

      &-content {
        flex: none;
        flex-basis: 100%;
        padding: 0;
        order: -1;
        margin-bottom: 16px;
      }

      &-right-side {
        flex-basis: 100%;
      }
    }
  }
</style>
